<template>
    <div class = "BroadcastDetail">
        <div class = "video-main">
            <video 
            object-fit = "fill"
            poster = "http://192.168.31.134:8000/images/broadcastCard_1.png"
            src="http://192.168.31.134:8000/video/video_1.mp4"></video>
            <h5 class = "video-title">课程的标题课程的标题课程的标题课程的标题课程的标题课程的标题课程的标题课程的标题课程的标题课程的标题</h5>
            <p class = "clearfix">
                <span class = "left">
                    <span class = "iconfont icon-zhibo"></span>时长:15:30
                </span>
                <span class = "right">2019-08-08</span>
            </p>
        </div>
        <div class = "video-operate clearfix">
            <div class = "left">
                <p>
                    <span class = "iconfont icon-good"></span>
                    <span>12</span>
                </p>
                <p @click = "toComment">
                    <span class = "iconfont icon-liuyan"></span>
                    <span>评论</span>
                </p>
                <p>
                    <span class = "iconfont icon-shoucang"></span>
                    <span>收藏</span>
                </p>
            </div>
            <div class = "right">
                <p @click = "openMask(0)">
                    <span class = "iconfont icon-iconfontfenxiang"></span>
                    <span>分享</span>
                </p>
            </div>
        </div>
        <div class = "delimiter"></div>
        <div class = "teacher-message">
            <h5>
                <img src="http://192.168.31.134:8000/images/theacher_1.png" alt="">
                <span>讲师姓名</span>
            </h5>
            <p>    讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介</p>
        </div>
        <div class = "delimiter"></div>
        <div class = "course-message current-title">
            <h5>课程概述</h5>
            <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介=====    课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介=====</p>
        </div>
        <div class = "delimiter"></div>
        <div class = "assess current-title">
            <h5>评价</h5>
            <ul>
                <li class = "assess-item" v-for = "v in 5" :key = "v">
                    <h5>
                        <img src="http://192.168.31.134:8000/images/customer_1.png" alt="">
                        <span>昵称</span>
                    </h5>
                    <p>评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价</p>
                </li>
            </ul>
        </div>
        <div class = "footer">
            <span>19268元</span>
            <span @click = "openMask(1)">购买</span>
        </div>
        <div class = "mask" v-show = "isOpenMask" @click = "closeMask" catchtouchmove>
            <div v-if = "maskState == 0" class = "mask-share" @click.stop = "stopPropagation">
                <h5>分享到</h5>
                <ul class = "clearfix">
                    <li>
                        <button open-type = "share">微信分享</button>
                        <img src="http://192.168.31.134:8000/images/wechart.png" alt="">
                        <span>微信</span>
                    </li>
                    <li>
                        <button open-type = "share">朋友圈分享</button>
                        <img src="http://192.168.31.134:8000/images/friend.png" alt="">
                        <span>朋友圈</span>
                    </li>
                </ul>
            </div>
            <div v-else-if = "maskState == 1" class = "mask-buy"  @click.stop = "stopPropagation">
                <h5>支付19元</h5>
                <p>
                    <span :class = "isDeduction ? 'icon active' : 'icon'" @click = "changeDeduction"></span>
                    <span>50知识币可抵扣1元</span>
                </p>
                <div class="to-buy">支付</div>
            </div>
            <div v-else-if = "maskState == 2" class = "mask-recharge"  @click.stop = "stopPropagation">
                <div class = "container">
                    <h5>亲，免费试看5分钟结束哦~</h5>
                    <p class = "buy-goods">购买:19元</p>
                    <p class = "to-recharge">会员充值</p>
                </div>
                <div class="button-close">
                    <span class = "iconfont icon-guanbi" @click = "closeMask"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return {
            isOpenMask: false,
            maskState: 0,      //0 分享模块 1 支付模块 2 充值模块
            isDeduction: false 
        }
    },
    onLoad(){
    },
    methods: {
        //改变抵扣状态
        changeDeduction(){
            this.isDeduction = !this.isDeduction;
        },
        //购买商品
        buyGoods(){

        },
        //跳转评论页
        toComment(){
            wx.navigateTo({ url: '/pages/Comment/main' });
        },
        //关闭遮罩栏
        closeMask(){
            this.isOpenMask = false;
        },
        //打开遮罩层事件
        openMask(state){
            this.maskState = state;
            this.isOpenMask = true;
        },
        //阻止事件传播
        stopPropagation(){
            return false;
        }
    },
    // onShareAppMessage(e){
    //     console.log("事件对象：",e.target);
    //     return {
    //         path: "/pages/BroadcastDetail/main",
    //         title: "我的分享"
    //     }
    // }
}
</script>
<style lang = "scss" scoped>
    @import "index.scss";
</style>
